<style scoped>
.g-body {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 110px 20px 0 248px;
}

.g-statues-bar {
  position: fixed;
  z-index: 90;
  top: 55px;
  left: 248px;
  right:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*width: 100%;*/
  height: 40px;
  /*margin-left: 270px;*/
  margin:10px 10px 10px 0;
  background: #fff;
  box-shadow: 0px 1px 7px #ccc;

}

.g-statues-bar .bread {
  line-height: 40px;
  padding: 0px 20px;
  font-size:16px;
}

.g-side {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 238px;
  height: 100%;
  /*padding-top: 20px;*/
  border-right: 1px solid #dedede;
  overflow-y: auto;
  /*background: #2e3e4d;*/
  background: rgba(46,62,77,.9);
  color:#fff;
}
.theme_titl{
  padding:20px;
  text-align: center;
  font-size:18px;
  background: #3b4d61;
}
.el-menu-item{
  color:#cacaca;
  text-align: center;
      padding-left: 40px;
    background: rgba(46,62,77,.9);
}
.el-menu-item:focus, .el-menu-item:hover {
    color:#fff;
    background-color: #3b4d61;
}
.g-head {
  position: fixed;
  z-index: 91;
  top: 0;
  left: 238px;
  right: 0;
  /*width: 100%;*/
  height: 55px;
  line-height: 55px;
  /*background: #15c288;*/
  background: #fff;
  box-shadow: 0px 1px 7px #ccc;
}

.logo {
  float: left;
  text-align: center;
  /*width: 270px;*/
  /*font-size: 1.4em;*/
  text-decoration: none;
  padding-left:30px;
  cursor: inherit;
  color:#333;
}

.nav {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right:20px;
  justify-content: flex-end;
display: flex;
}
.usermenu {
  float: right;
  padding: 0 2em;
  color:#333;
}
.usermenu a {
  text-decoration: none;
  margin: 0 0.2em 0 1em;
  color:inherit;
}
#main,.index_main {
  /*height: 88%;*/
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  padding: 15px 30px 30px;
  margin-top:5px;
  min-height: 50%;
  box-shadow: 0px 1px 7px #ccc;

}
.other{
  background:#fff;
  margin-top:10px;
  padding:30px;
  /*min-height: 168px;*/
  box-shadow: 0px 1px 7px #ccc;

}
.message{
  position: absolute;
    right: 0;
    top: 65px;
    /*width: 400px;*/
    /*height: 200px;*/
    z-index: 111;
    display: flex;
    /*border:1px solid #ccc;*/
    height:80%;
    justify-content: flex-end;
}
.toggleshow{
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
    box-shadow: 0px 0px 8px #ccc;

}
.message_cont{
  /*border:1px solid #ccc;*/
  padding:20px;
  width: 280px;
  background: #fff;
  box-shadow: 5px 0px 7px #ccc;
}
.leftClass{
    position: relative;
    left: -8px;
}
.message_title,.other_title{border-bottom: 1px solid #cbcbcb;padding-bottom: 10px;color:#222;font-size: 16px;}
.notice{
  background:#35ccb4;
  padding:3px 5px;
  border-radius: 3px;
  margin-right: 12px;
}
.main_title_icon{    float: left;    margin-right: 10px;}
.el-menu-item.is-active{color:#fff;}

.copyreg{text-align: center;color:#999;padding:30px 10px 10px;/*position: relative;left: 238px; right: 0;bottom:0;*/}
/*.el-table thead.has-gutter{color:#222;}*/

.donghua-enter-active,.donghua-leave-active{
     transition: .8s all ease;
 }
 .donghua-enter-active{
     /*opacity: 1;*/
     width: 280px;
     /*height: 300px;*/
 }
 .donghua-leave-active{
     /*opacity: 0;*/
     width: 100px;
     /*height: 100px;*/
 }
 .donghua-enter,.donghua-leave{
     /*opacity: 0;*/
     width: 100px;
     /*height: 100px;*/
 }
 #box{
    width: 300px;
    height: 32px;
    overflow: hidden;
    /*padding-left: 30px;*/
    /*border: 1px solid black;*/
    display:inline-block;
    position: relative;
    top: 11px;
}
.anim{
    transition: all 0.8s;
    margin-top: -30px;
}
#con1{padding:0;text-align: left;}
#con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
}
</style>
<template>
  <div class="g-body">
    <el-row type="flex" class="g-head">
      <div  target="_blank" title="公告" class="logo" >
       <!--  <i class="notice"><img src="../assets/img/notice.png"></i>
        <div id="box">
          <ul id="con1" ref="con1" :class="{anim:animate==true}">
            <li v-for='item in items'>{{item.name}}</li>
          </ul>
        </div> -->
        <div class="tabs_ul">
          <div v-for="(item,index) in tabsData" @click="handletabs(item)" :class="{'tabs_list':true,'tabs_list_active':item.active}">{{item.name}}</div>
         
        </div>
        
      </div>
      <div class="nav">
       <!--  <div class="usermenu" v-if="user.token">
          欢迎您：aaaaaa{{user.name}}
          <router-link :to="{path: '/'}"><i class="el-icon-location"></i>首页</router-link>
          <a href="javascript:;" @click="logout"><i class="el-icon-circle-close"></i>退出</a>
        </div> -->
        <!-- <el-col :span="4" class="userinfo"> -->
              <!-- <span @click="altMessage" class="el-dropdown-link userinfo-inner userinfo_message"><i class="fa fa-commenting"></i> 客服 </span> -->

              <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner"><i class="el-icon-tickets"></i><!--<img :src="this.sysUserAvatar" />--> 用户 <i class="el-icon-arrow-down"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="message">我的消息</el-dropdown-item>
              <el-dropdown-item @click.native="set">设置</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        <!-- </el-col> -->

      </div>
      
    </el-row>
    <el-menu :default-active="activeDes"  @select="handleselect" :defaultOpeneds="defaultOpends" class="g-side" router >
    <div class="theme_titl">交易平台后台管理系统</div>

      <template v-for="(route, index) in menus">
        <template v-if="route.children">
          <el-submenu :key="index" :index="route.meta.des">
            <template slot="title">
              <i class="title_icon">{{activeDes}}--<img :src="route.meta.icon_img"></i>
              {{route.meta.name || route.name}}</template>
            <el-menu-item v-for="(cRoute, cIndex) in route.children" :key="cIndex" :index="cRoute.meta.des" :route="cRoute"><i class="ion menuIcon" v-html="cRoute.meta.icon"></i>{{cRoute.meta.des}}--{{cRoute.meta.name || cRoute.name}}</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :route="route" :index="route.name">{{route.meta.name || route.name}}</el-menu-item>
        </template>
      </template>
    </el-menu>

    <div class="g-statues-bar p-lr">
      <el-breadcrumb separator="/" class="bread" id="mybread">
        <i class="main_title_icon"><img src="../assets/img/keyactive.png"></i>
        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
          {{ item.meta.name || item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <template v-if="$route.path=='/goods'">
      <dashboard class="index_main" />
    </template>
    <template v-else>
    <router-view id="main"></router-view>
    </template>

      
    <!-- <transition name="donghua"> -->
      <div class="message">
        <div class="toggleshow" @click="toggleshow">
          <i :class="{leftClass:!isshow}">
            <img v-if="isshow" :src="arrowimg">
            <img v-if="!isshow" :src="arrowimgleft">
          </i>
        </div>
        <transition name="donghua">

          <div class="message_cont" v-show="isshow">
            <div class="message_title">消息通知</div>
          
          </div>
        </transition>

      </div>
        
    <!-- </transition> -->
    <div class="other">
      <div class="other_title">其它</div>
    </div>
    <div class="copyreg">
      星沙网络科技有限公司版权所有
    </div>
  </div>
</template>
<script>
import instance from "../api";
import { changePw } from "../api/account";
import userPathDeal from '../router/fullpathDeal';
import userPath from '../router/fullpath';


export default {
  components: {
    dashboard: () => import("../components/dashboard.vue")
  },
  data() {
    return {
      defaultOpends:['authlist','deal','order'],
      tabsData:[{name:'权限',active:true,id:'userPath'},{name:'交易',active:false,id:'userPathDeal'}],
      animate:false,
      items:[
          {name:"用户发布了新公告"},
          {name:"角色发布了新内容"},
          {name:"用户组有了新用户"}
      ],
      arrowimg:require('../assets/img/arrow.png'),//消息框列表显示按钮
      arrowimgleft:require('../assets/img/arrow-left.png'),//消息框列表显示按钮
      leftClass:'leftClass',
      isshow:false,//消息列表是否展现
      // btnIcon:'el-icon-d-arrow-right',//消息列表显示按钮
      user: {},
      menus: [],
      activeIndex:'0-1',
      activeDes:this.$route.meta.des,
      // activeDes:'users',
    };
  },
  computed: {

    activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  methods: {
    handletabs(item){//tabs切换
      this.tabsData.map(x=>{
        x.active=false;
      })
      this.$set(item,'active',true);
      sessionStorage.setItem("tabsData",JSON.stringify(this.tabsData));//tabs的切换值
      console.log(this.$route);
      sessionStorage.setItem("routerPathId",item.id);

      if(item.id=="userPath"){
        this.$parent.extendRoutes(userPath);
        // sessionStorage.setItem("routerPath",JSON.stringify(userPath));
        // this.activeDes="users";
        this.$set(this,'activeDes','users')
        this.$router.push("/authlist/users");


      }else if(item.id=="userPathDeal"){
        this.$parent.extendRoutes(userPathDeal);
        // sessionStorage.setItem("routerPath",JSON.stringify(userPathDeal));
        // this.activeDes="currency";
        this.$set(this,'activeDes','currency')

        this.$router.push("/deal/currency");

      }
      let menus = this.$parent.menuData[0].children;
      if (menus) {
        this.menus = menus;
      }
      sessionStorage.setItem("menus",JSON.stringify(menus));
      console.log(this.$parent.menuData[0].children);
    },
     altMessage:function(){
      this.$message("正在开发，敬请期待！")
    },
    message(){
      this.$message("正在开发，敬请期待！")
        
    },
    set(){
      this.$message("正在开发，敬请期待！")

    },
    scroll(){
       this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
       setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
         this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
         this.items.shift();               //删除数组的第一个元素
         this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
       },1000)
    },
    toggleshow:function(){
      //展开合起消息列表
      this.isshow=!this.isshow;
      if(this.isshow==true){
        // this.arrowimg=require('../assets/img/arrow.png');
      }else{
        // this.arrowimg=require('../assets/img/arrow-left.png');
        
      }
    },
    logout: function() {
      this.$confirm("确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(() => {
          this.$emit("logout");
        })
        .catch(() => {});
    },
     handleselect: function (a, b) {
      console.log("切换")
       this.activeIndex = a;
       // this.activeMenu=a;
    },
  },
 
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": function(){
      console.log("路由变化")
      console.log(this.$route)
      // this.$set(this,'activeDes',this.$route.meta.des)
      // this.activeDes=this.$route.meta.des;
    }
  },

  created: function() {
    console.log(this.$route);
      
    let sessionTabsData=JSON.parse(sessionStorage.getItem("tabsData"));
    if(sessionTabsData){
      this.tabsData=sessionTabsData;
    }
    let user = this.$parent.userData;
    if (user) {
      this.user = user;
    } else {
      this.$router.push({ path: "/login" });
    }
    // let menus = this.$parent.menuData;//从后台获取路由时判断
    let sessionMenus=sessionStorage.getItem("menus");
    let menus = this.$parent.menuData[0].children;
    if(sessionMenus){
      this.menus = JSON.parse(sessionMenus);

    }else{
      if (menus) {
        this.menus = menus;
      }
    }
    // this.activeNav=this.activeMenu;
  /*    let menusDeal= this.$parent.menuDealData[0].children;
    if (menusDeal) {
      this.menusDeal = menusDeal;
    }*/
    setInterval(this.scroll,2000)
  }
};
</script>
